import {
  SubtractCircle16Filled,
  AddCircle16Filled,
  TabDesktopImage16Filled,
  ClipboardCode24Filled,
  RatioOneToOne24Filled
} from "@vicons/fluent";
import {
  NInputNumber,
  NIcon,
  NSpace,
  NButtonGroup,
  NButton,
  NPopover,
} from "naive-ui";
import {
  showAddMenu,
  vertical,
  showViewJosn,
  flowDesignNodes,
  saveImage,
} from "@/hooks/useWflow";
import EndNode from "./Vertical/EndNode";
import CEndNode from "./Column/CEndNode";
import ViewJson from "./ViewJson";

export default defineComponent({
  name: "FlowDesign",
  setup(_, { slots }) {
    let mooz = ref(100);
    const clientXY = reactive([0, 0]);
    let isMove = false;
    let clientX = 0,
      clientY = 0;
    let translateXY = [0, 0];
    const handleKeyDown = (e: MouseEvent) => {
      isMove = true;
      clientX = e["clientX"];
      clientY = e["clientY"];
    };
    const handleKeyMove = (e: MouseEvent) => {
      if (isMove) {
        showAddMenu(0, 0, false);
        clientXY[0] = e["clientX"] - clientX + translateXY[0];
        clientXY[1] = e["clientY"] - clientY + translateXY[1];
      }
    };
    const handleKeyUp = () => {
      translateXY[0] = clientXY[0];
      translateXY[1] = clientXY[1];
      isMove = false;
    };
    const handleWheel = (e: WheelEvent) => {
      showAddMenu(0, 0, false);
      if (e.deltaY > 0) {
        mooz.value > 0 ? (mooz.value -= 5) : (mooz.value = 0);
      } else {
        mooz.value += 5;
      }
    };
    let flowdesignview = ref();
    const handleShowViewJosn = () => {
      let code = JSON.stringify(toRefs(flowDesignNodes), null, 2);
      showViewJosn(code);
    };
    const handleSaveImage = () => {
      saveImage(flowdesignview.value).then((dataUrl) => {
        let link = document.createElement("a");
        link.download = "fowdesign.png";
        link.href = dataUrl;
        link.click();
      });
    };

    const handleResetRatio = () => {
      mooz.value = 100;
      clientXY[0] = 0;
      clientXY[1] = 0;
      clientX = 0,
      clientY = 0;
      translateXY = [0, 0];
    }

    onMounted(() => {
      saveImage(flowdesignview.value);
    });
    return () => (
      <div
        class="w-full h-full overflow-hidden"
        onWheel={(e: WheelEvent) => {
          handleWheel(e);
        }}
        onMousedown={(e: MouseEvent) => {
          handleKeyDown(e);
        }}
        onMousemove={(e: MouseEvent) => {
          handleKeyMove(e);
        }}
        onMouseup={(e: MouseEvent) => {
          handleKeyUp();
        }}
      >
        <div class="absolute top-0 right-0 w-full z-10">
          <NSpace justify="start">
            <NPopover>
              {{
                trigger: () => {
                  return (
                    <NInputNumber
                      style={{
                        width: "112px",
                        userSelect: "none",
                      }}
                      v-model:value={mooz.value}
                      step={5}
                    >
                      {{
                        "minus-icon": () => {
                          return <NIcon component={SubtractCircle16Filled} />;
                        },
                        "add-icon": () => {
                          return <NIcon component={AddCircle16Filled} />;
                        },
                        suffix: () => {
                          return "%";
                        },
                      }}
                    </NInputNumber>
                  );
                },
                default: () => "缩放",
              }}
            </NPopover>
            <NPopover>
              {{
                trigger: () => {
                  return (
                    <NButton
                      onClick={() => {
                        handleResetRatio();
                      }}
                    >
                      <NIcon size={20} component={RatioOneToOne24Filled} />
                    </NButton>
                  );
                },
                default: () => "重置",
              }}
            </NPopover>
            <NButtonGroup>
              <NPopover>
                {{
                  trigger: () => {
                    return (
                      <NButton
                        onClick={() => {
                          handleSaveImage();
                        }}
                      >
                        <NIcon size={20} component={TabDesktopImage16Filled} />
                      </NButton>
                    );
                  },
                  default: () => "保存图片",
                }}
              </NPopover>
              <NPopover>
                {{
                  trigger: () => {
                    return (
                      <NButton
                        onClick={() => {
                          handleShowViewJosn();
                        }}
                      >
                        <NIcon size={20} component={ClipboardCode24Filled} />
                      </NButton>
                    );
                  },
                  default: () => "查看JSON",
                }}
              </NPopover>
            </NButtonGroup>
          </NSpace>
        </div>
        <div
          ref={flowdesignview}
          class={`flow-design-view ${
            vertical.value
              ? "vertical-view flex-col w-full"
              : "column-view flex-row h-full"
          } p-2 inline-flex items-center box-border select-none cursor-move`}
          style={{
            transform: `scale(${mooz.value / 100}) translate(${
              clientXY[0]
            }px, ${clientXY[1]}px)`,
          }}
        >
          {slots?.default && slots.default()}
          {vertical.value ? <EndNode /> : <CEndNode />}
        </div>
        <ViewJson />
      </div>
    );
  },
});
